<script lang="ts" setup>
import { ref } from 'vue'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

// 表单信息->添加清单的名称
const form = ref({
  classifyName: '',
})
// 准备像父组件传递数据
const emit = defineEmits(['getclassifyName'])
// 添加分类事件
const addClassify = () => {
  dialogFormVisible.value = false
  // 把清单名称传给父元素
  emit('getclassifyName', form.value.classifyName)
  form.value.classifyName = ''
}
</script>

<template>
  <span plain 
  @click="dialogFormVisible = true" 
  class="iconfont" 
  style="font-size: 13px; cursor: pointer;"
  >
    &#xe641;
  </span>

  <el-dialog v-model="dialogFormVisible" title="添加分类" width="500">
    <el-form :model="form">
      <el-form-item label="分类名称" :label-width="formLabelWidth">
        <el-input v-model="form.classifyName" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false, form.classifyName = ''">取消</el-button>
        <el-button type="primary" @click="addClassify">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>